/**
 * tip组件
 * @type {ReactNative|exports|module.exports}
 */
var React = require('react-native');
var QMOverlay = require('./overlay');
var TimerMixin = require('react-timer-mixin');

var {
  Text,
  StyleSheet
} = React;


//yeah, just do nothing.
var noop = {};


/**
 * Usage
 *
 * var {QMTip} = require('qmtip');
 *
 *
 */
var QMTip = React.createClass({
  mixins: [TimerMixin],


  getDefaultProps(){
    return {
      //是否显示
      visible: false,
      //显示的消息的内容
      text: '',
      //是否模态
      modal: false,
      //消失时间
      time: 2000,
      //tip消失后的callback
      onTipDisappear: noop
    };
  },


  getInitialState(){
    return {
      visible: this.props.visible
    }
  },


  componentDidMount(){
    //如果当前是显示状态
    if (this.state.visible) {
      //默认2s后关闭
      this.setTimeout(() => {
        this.setState({
          visible: false
        });

        this.props.onTipDisappear();

      }, this.props.time);
    }
  },


  componentWillReceiveProps(nextProps){
    if (this.props.visible != nextProps.visible && nextProps.visible && nextProps.text != '') {
      //如果当前的属性为显示状态，则立刻去显示
      this.setState({
        visible: true,
	      text: nextProps.text
      });

      //默认2s后关闭
      this.setTimeout(() => {
        this.setState({
          visible: false,
	        text: ''
        });

        this.props.onTipDisappear();

      }, this.props.time);
    }
  },


  render() {
    //如果不现实直接remove掉
    if (!this.state.visible) {
      return null;
    }

    return (
      <QMOverlay
        style={this.props.style}
        modal={this.props.modal}>
        <Text style={styles.text}>
          {this.state.text}
        </Text>
      </QMOverlay>
    );
  }
});


var styles = StyleSheet.create({
  text: {
    color: '#FFF'
  }
});


module.exports = QMTip;